<template>
  <div>
    <!-- <input id="input-box" type="text" v-model="totalNum"/> -->
    <el-form label-width="100px">
      <el-form-item :label="title">
        <el-input @input="inputCheck" v-model="totalNum"></el-input>
      </el-form-item>
    </el-form>
    <div id="calc-box">
      <span class="btn" @click="getNumber('1')">1</span>
      <span class="btn" @click="getNumber('2')">2</span>
      <span class="btn" @click="getNumber('3')">3</span>
      <span class="btn" @click="getNumber('4')">4</span>
      <span class="btn" @click="getNumber('5')">5</span>
      <span class="btn" @click="getNumber('6')">6</span>
      <span class="btn" @click="getNumber('7')">7</span>
      <span class="btn" @click="getNumber('8')">8</span>
      <span class="btn" @click="getNumber('9')">9</span>
      <span class="btn" @click="getNumber('0')">0</span>
      <span class="btn" @click="getNumber('.')">.</span>
      <span class="btn operator" @click="clearNum">清除</span>
      <span class="btn operator1" @click="getInputNumber">确定</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyBoardVisible: false,
      numArray: [],
      totalNum: '',
      panNum: '',
      title: '',
      discountMoney: 0,
      money: 0
    };
  },

  created() {
  },

  methods: {
    init(param) {
      this.money = param
      this.keyBoardVisible = true
      this.title = param
    },

    inputCheck() {
      if (isNaN(this.totalNum)) {
        this.totalNum = ''
      }
    },

    //确认
    getInputNumber() {
      if (this.totalNum === '') {
        this.$message({
          message: '请输入优惠金额',
          type: 'warning',
          duration: 1500
        });
      } else {
        this.$emit("getDiscountMoney", this.totalNum)
        this.keyBoardVisible = false
      }

    },

    getNumber(num) {
      this.panNum += num.toString()
      var index = this.panNum.indexOf(".")
      var str2 = this.panNum.substr(index + 2, 1)
      var str1 = this.panNum.substr(index, 1)
      var privousStr = this.panNum.substring(0, index)
      if(num === '0' && this.panNum.length === 1){
        this.totalNum = ''
        this.panNum = ''
      }
      else if (this.panNum.includes("..")){
        this.totalNum = privousStr
      }
      else if (index >= 1 && str2 !== ''){
        this.totalNum = privousStr + '.' + str2
      }else {
        this.totalNum += num.toString()
      }
      this.discountMoney = this.money - Number(this.totalNum)

    },
    //清除数据
    clearNum() {
      this.totalNum = ''
      this.panNum = ''
    },
  },


};
</script>

<style>
#app {
  width: 100%;
  padding: 20px 20px 10px;
  border-radius: 4px;
  margin: 0px auto;
  background: #ffffff;

  box-sizing: border-box;
}

#input-box {
  display: block;
  width: 100%;
  height: 46px;
  margin-bottom: 15px;
  border: none;
  border-radius: 6px;
  background: #ADD8E6;
  padding: 0 5px;
  text-align: right;
  font-size: 20px;
  color: #ffffff;
  font-weight: bold;
  letter-spacing: 1px;
}

#calc-box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

#calc-box .btn {
  font-size: 20px;
  width: 30%;
  height: 40%;
  text-align: center;
  line-height: 40px;
  border-radius: 6px;
  cursor: pointer;
  background: #B0E0E6;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 12px;
  box-shadow: 0 2px rgba(0, 0, 0, 0.2);
}

#app .btn-double {
  width: 115px;
  background: #ffc690;
  box-shadow: 0 4px #ab7c50;
}

#app .clear {
  background: #ff94e6;
  box-shadow: 0 4px #d631af;
  color: #fff;
}

#app .operator {
  background: #FFB6C1;
  color: white;
}

#app .operator1 {
  background: #428ec8;
  color: white;
  width: 100%
}

#app .back {
  background: #f1ff98;
  box-shadow: 0 4px #9da858;
}
</style>
